<template>
  <basic-container>
    <el-page-header @back="onBack">
      <template #content>
        <div class="flex items-center">
          <el-icon>
            <Connection/>
          </el-icon>
          <el-text size="large" tag="b"> 分组信息=></el-text>
          <el-text size="large"> {{ groupDetail.groupName }}</el-text>
        </div>
      </template>
      <basic-container>
        <el-descriptions :column="2" size="small">
          <el-descriptions-item label="分组名称 :">
            {{ groupDetail.groupName }}
            <el-text type="primary" size="small" class="cursor" v-clipboard:copy="this.groupDetail.groupName" v-clipboard:success="onCopySuccess">复制</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="分组ID :">
            {{ groupDetail.id }}
            <el-text type="primary" size="small" class="cursor" v-clipboard:copy="this.groupDetail.id" v-clipboard:success="onCopySuccess">复制</el-text>
          </el-descriptions-item>
        </el-descriptions>
      </basic-container>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="分组信息" name="info">
          <group-info :group-id="this.groupId"></group-info>
        </el-tab-pane>
        <el-tab-pane label="设备列表" name="device">
          <group-device :group-id="this.groupId"></group-device>
        </el-tab-pane>
      </el-tabs>

    </el-page-header>
  </basic-container>
</template>

<script>
import {getDetail} from "@/api/iot/group";

import {mapGetters} from "vuex";
import GroupDevice from "@/views/iot/group/groupDevice.vue";

export default {
  components: {GroupDevice},
  data() {
    return {
      activeName: 'info',
      groupId: '',
      groupDetail: {},
      deviceId: '',
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.groupId = this.$route.params.groupId;
      getDetail(this.groupId).then(res => {
        this.groupDetail = res.data.data;
      });
    },
    onBack() {
      this.$router.push({
        path: '/iot/group',
      });
      this.$router.$avueRouter.closeTag();
    },
    onCopySuccess() {
      this.$message.success('复制成功');
    },
    viewDevice() {
      this.$router.push({
        path: `/iot/device/detail/${this.groupId}`,
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style>
.cursor {
  cursor: pointer;
}
</style>
